<template>
  <div class="box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="imgs"
        ><img
          :src="img1"
          alt=""
      /></van-swipe-item>
      <van-swipe-item class="imgs"
        ><img
          :src="img2"
          alt=""
      /></van-swipe-item>
      <van-swipe-item class="imgs"
        ><img
           :src="img3"
          alt=""
      /></van-swipe-item>
      <van-swipe-item class="imgs"
        ><img
           :src="img4"
          alt=""
      /></van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import axios from "axios";

Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  name: "banner",
  data() {
    return {
      img1:"",
      img2:"",
      img3:"",
      img4:"",
    };
  },
  components: {},
  created() {
    axios({
      url: "http://localhost:3000/myBanner",
      method: "get",
      params: {
        type: this.type,
      },
    }).then((res) => {
      this.img1=res.data[0].img1;
      this.img2=res.data[0].img2;
      this.img3=res.data[0].img3;
      this.img4=res.data[0].img4;
    });
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  box-sizing: border-box;
  padding: 0 0.12rem;
  height: 1.09rem;
  width: 100%;
  margin-top: 0.12rem;
}
.imgs {
  height: 100%;
  width: 100%;
  /* border-radius: .04rem; */
}
.imgs img {
  height: 100%;
  width: 100%;
  border-radius: 0.04rem;
}
</style>
